<template>
   
    <Layout>
        <template #default>
            <BlogList 
                :pagerInfo="pagerInfoCom"
                :blogPageObj="blogPageRef"
                @pageChange="pageHandle"
                
                v-load="isLoadingRef"

                ref="blogListComponent"
            ></BlogList>
            
        </template>
        <template #right>
            <BlogCategory 
                :categoryList="blogCategoryListRef"
                v-model:categoryId="categoryIdModel"
                @select="handleSelect"
            ></BlogCategory>
        </template>
    </Layout>
    
</template>
<script setup lang='ts'>
import Layout from '~@/components/Layout/index.vue'
import BlogList from './components/BlogList.vue';
import BlogCategory from './components/BlogCategory.vue';
import { computed, onMounted, ref, watch } from 'vue';
import { TypeApiBlogCategoryI, TypeApiBlogPageI } from '~@/api/apiTypes';
import { getBlogCategories, getBlogsApi } from '~@/api/blog';
import { useRoute,useRouter } from 'vue-router';
import { InterfacePagerI } from '~@/components/Pager/pagerType';
import { vLoad } from '~@/directives/loading/loadingDirective';

    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
    type TypeBlogListQuery=Partial<{
    page:number,
    limit:number,
    categoryId:number
}>


const isLoadingRef=ref(true);

const route=useRoute();
const router=useRouter()

const blogPageRef=ref<TypeApiBlogPageI>();
const categoryIdModel=ref(-1);

const blogListComponent=ref<InstanceType<typeof BlogList>>();


const pagerInfoCom=computed<InterfacePagerI>(()=>{
    // console.log('in pagerInfoCom');
    // console.log({
    //     total:blogPageRef.value?.total || 0,
    //     current: parseInt(route.query.page as any) || 1,
    //     limit: parseInt(route.query.limit as any)|| 10,
    //     visibleNumber:5
    // });
    
    return {
        total:blogPageRef.value?.total || 0,
        current: parseInt(route.query.page as any) || 1,
        limit: parseInt(route.query.limit as any)|| 10,
        visibleNumber:5
    }
})

//categoryId: +route.params.categoryId  || -1,

onMounted(async ()=>{
    // console.log('in blogIndex onMounted');
    isLoadingRef.value=true;
    blogPageRef.value=await getBlogsApi();
    isLoadingRef.value=false;
})

watch(route,async ()=>{
    // console.log('in watch route');
    
    blogPageRef.value=await getBlogsApi(
        pagerInfoCom.value.current,
        pagerInfoCom.value.limit
    );
    if(route.params.categoryId){
        categoryIdModel.value=new Number(route.params.categoryId).valueOf();
    }
    
});

watch(categoryIdModel,(newV,oldV)=>{
    // console.log('oldV,newV',oldV,newV);
    
    if(newV === -1){
        router.push({name:'blog'})
    }else{
        router.push({
            name:'categoryBlog',
            params:{
                categoryId:categoryIdModel.value
            }
        })
    }
    blogListComponent.value?.scrollTop()
})

const pageHandle=(newPage:number)=>{
    // console.log('newPage',newPage);
    const query={
        page:newPage,
    }
    if(categoryIdModel.value === -1){
        router.push({
                name:'blog',
                query
            });
    }else{
        router.push({
            name:'categoryBlog',
            query,
            params:{
                categoryId:categoryIdModel.value
            }
        })
    }
    blogListComponent.value?.scrollTop()
}

//#region blog category part

const blogCategoryListRef=ref<TypeApiBlogCategoryI[]>([]);

const categoryId=computed(()=>{
    return route.query.id?-1:(route.query.id) as unknown as number;
})

const handleSelect=(id:number|string)=>{
    console.log('in handleSelect ,id = ',id);
    
}

onMounted(async ()=>{
    blogCategoryListRef.value=await getBlogCategories();

});

//#endregion 

    
</script>
<style lang='less' scoped>
    
</style>